<template>
  <div class="w-full h-full flex justify-start content-start flex-col min-w-160">
    <div class=" flex justify-start items-between space-x-2 text-2xl font-semibold">
      <n-popover trigger="hover" placement="bottom">
        <template #trigger>
          <div class="cursor-pointer hover:text-blue-500">
            <Icon
                class="select-none">
              <Calendar/>
            </Icon>
            <span>{{ nian }}年</span>
            <span>{{ yue }}月</span>
          </div>
        </template>
        <span>或许不想知道你的花园长得咋样</span>
      </n-popover>
    </div>
    <div class="w-full flex justify-evenly items-center mb-4">
      <div class="w-1/7 flex justify-start items-center" v-for="item in xingqi" :key="item">
        <div class="bg-gray-200 select-none w-20 py-2 text-blue-500 juzhong">
          <span>{{ item }}</span>
        </div>
      </div>
    </div>
    <div class="w-full flex justify-start content-start flex-wrap">
      <div class="w-1/7 mb-4 bg-opacity-0 flex justify-start items-center" v-for="item in daylist" :key="item">
        <div class="w-20 h-20 bg-gray-200 p-2 flex flex-col justify-start items-center relative text-xs" v-if="item">
          <span>{{ item.ri }}</span>
          <div class="w-full rounded-full bg-blue-500 text-white text-center my-2  select-none">未签到</div>
          <div class="w-full rounded-full bg-blue-500 text-white text-center  select-none">未签退</div>
          <span class="text-red-500 absolute top-1 right-1 text-xs"
                v-if="nowtime.nian===item.nian && nowtime.yue===item.yue && nowtime.ri===item.ri">今天</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {Icon} from '@vicons/utils' // 外壳
import {Calendar} from "@vicons/ionicons5"
import {ref} from "vue";
import {NPopover} from "naive-ui"
// 手动选择的年和月
const nian = ref(0)
const yue = ref(0)
// 当前时间的年月日
const nowtime = ref({
  nian: "",
  yue: "",
  ri: "",
})
const xingqi = ref([
  "周日",
  "周一",
  "周二",
  "周三",
  "周四",
  "周五",
  "周六",
])
const daylist = ref([])
// 获取当前时间，标记今天
const getnowtime = () => {
  const time = new Date()
  const nian = time.getFullYear().toString()
  const yue = (time.getMonth() + 1)
  const ri = time.getDate()
  nowtime.value = {
    nian: nian,
    yue: yue >= 10 ? yue.toString() : "0" + yue.toString(),
    ri: ri >= 10 ? ri.toString() : "0" + ri.toString(),
  }
}
const geshihua = (time) => {
  const nian = time.getFullYear()
  const yue = time.getMonth() + 1
  const ri = time.getDate()
  const week = time.getDay()
  return {nian: nian, yue: yue, ri: ri, week: week}
}
const chuli = () => {
  daylist.value = []
  const data = new Date(nian.value, yue.value-1, 1)
  console.log(data,"asdas")
  const thisxingqi = data.getDay()
  // 往前填充null
  for (let i = 0; i < thisxingqi; i++) {
    daylist.value.push(null)
  }
  // 填充当月的数据
  const ershisixiaoshi = 24 * 60 * 60 * 1000
  for (let i = 0; i < 35; i++) {
    const thistime = new Date(data.getTime() + i * ershisixiaoshi)
    const jieguo = geshihua(thistime)
    console.log(jieguo,"每天")
    if (jieguo.yue === yue.value)
      daylist.value.push(jieguo)
  }
}
// 入口文件,接受的参数是  2021-02-03
const init = (shijian = null) => {
  if (shijian) {
    const a = shijian.split("-")
    nian.value = parseInt(a[0])
    yue.value = parseInt(a[1])
  } else {
    nian.value = parseInt(nowtime.value.nian)
    yue.value = parseInt(nowtime.value.yue)
  }
  chuli()
}
// 初始化区域
getnowtime()
init()
</script>

<style scoped>

</style>
